<template>
  <div class="TestRecordList h-full">
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="testRecordApi.list"
    />
    <Teleport v-if="isMounted" :to="appStore.containerDom">
      <div class="teleport-area search-box">
        <div class="search-forms">
          <n-input
            v-model:value="queryItems.name"
            class="search"
            style="width: 300px"
            placeholder="测试名称/被测对象名称/数据集"
            :clearable="true"
            @clear="goSearch"
            @keyup.enter="goSearch"
          >
            <template v-if="appStore.isDeep" #clear-icon>
              <img src="@/assets/images/deep-clear.svg" />
            </template>
            <template #suffix>
              <img :src="appStore.searchImg" />
            </template>
          </n-input>
        </div>
      </div>
    </Teleport>
  </div>
</template>
<script setup lang="jsx">
import { lightStatusMap, deepStatusMap } from '@/enum/test'
import * as testRecordApi from '@/api/testRecord'
import { useMounted } from '@/hooks/useMounted'
import { useAppStore } from '@/store'
defineOptions({
  name: 'TestRecordList',
})
const appStore = useAppStore()
const queryItems = reactive({
  name: null,
})
const columns = [
  {
    title: '测试名称',
    key: 'testName',
  },
  {
    title: '被测对象名称',
    key: 'testObjectName',
  },
  {
    title: '数据集',
    key: 'datasetNames',
  },
  {
    title: '测试类型',
    key: 'testModeName',
  },
  {
    title: '状态',
    key: 'testModeName',
    render: ({ startupState }) => <TestStatus status={startupState} />,
  },
  {
    title: '创建时间',
    key: 'createTime',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '操作',
    key: 'actions',
    width: 100,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render({ startupState, id, testName }) {
      return (
        <n-flex>
          <ActionButton v-show={startupState == '1'} onClick={() => handleStop(id, testName)}>
            终止
          </ActionButton>
          <ActionButton v-show={startupState == '2'} onClick={() => handleDelete(id, testName)}>
            删除
          </ActionButton>
          <ActionButton
            v-show={startupState == '3'}
            onClick={() => router.push({ path: '/test/detail', query: { id } })}
          >
            评估
          </ActionButton>
        </n-flex>
      )
    },
  },
]
const TestStatus = ({ status }) => {
  const map = appStore.isDeep ? deepStatusMap : lightStatusMap
  const opacity = appStore.isDeep ? '33' : '1C'
  return (
    <div
      class={['h-26 px-8 lh-26', appStore.isDeep ? 'rounded-2' : 'rounded-4']}
      style={{
        color: map[status].color,
        background: `${map[status].color}${opacity}`,
      }}
    >
      {map[status].text}
    </div>
  )
}
const $table = ref(null)
const { isMounted } = useMounted()
const router = useRouter()
function handleStop(id, testName) {
  const dialog = $dialog.warning({
    title: '提示',
    content: `请确定是否终止：${testName}`,
    negativeText: '取消',
    positiveText: '确定',
    positiveButtonProps: {
      color: appStore.buttonColor,
    },
    async onPositiveClick() {
      try {
        dialog.loading = true
        testRecordApi.stopTest(id).then(() => {
          dialog.loading = false
          $message.success('终止成功！')
          $table.value.handleQuery()
        })
      } catch (error) {
        console.log('error:', error)
        dialog.loading = false
      }
    },
  })
}

function handleDelete(id, testName) {
  const dialog = $dialog.warning({
    title: '提示',
    content: `请确定是否删除：${testName}`,
    negativeText: '取消',
    positiveText: '确定',
    positiveButtonProps: {
      color: appStore.buttonColor,
    },
    async onPositiveClick() {
      try {
        dialog.loading = true
        testRecordApi.del(id).then(() => {
          dialog.loading = false
          $message.success('删除成功！')
          $table.value.handleQuery()
        })
      } catch (error) {
        console.log('error:', error)
        dialog.loading = false
      }
    },
  })
}

function goSearch() {
  nextTick(() => {
    $table.value.handleSearch()
  })
}
</script>
<style lang="scss" scoped></style>
